{{Template:SZPT-CHINA/head}}
<html>

<head></head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function() {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function() {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function() {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function() {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
                // $("#loading").hide();
        }, 10);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function() {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function() {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function() {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }


        document.getElementById("down1").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('down1Key');
            animateScroll(target, 250);
        }

        document.getElementById("down2").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('down1Key');
            animateScroll(target, 250);
        }



    });
    $(window).scroll(function() {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 33.3333333%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:640px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 33.3333333%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", p);
        $("#bg3").attr("style", bg);


        $("#m1").mouseover(
                function() {
                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //1
                    $("#p1").attr("style", p);
                    $("#bg1").attr("style", bg);
                },

            ),
            $("#m2").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);


                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),

            $("#m1").click(function() {
                window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Hardware";
            });
        $("#m2").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Implementation";
        });
        $("#m3").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Proof_Of_Concept";
        });


    });
</script>
<script>
    $(document).ready(function() {

        $("#dir1").hover(function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });

        $("#dir4").hover(function() {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir4").attr("style", value);
        }, function() {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir4").attr("style", value);
        });

    });
</script>

<body class="pc" id="main">
    <!-- loading -->
    <div id="loadingHome" style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg" style=" position: relative; height: 4%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;" src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>

        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--Implementation-Gardware2.0.png" class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 33%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/d/d5/T--SZPT-CHINA--Implementation-Proof_of_Concept2.0.png" class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--Implementation-Implementation2.0.png" class="smallImg"></image>
                </div>

            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/1/15/T--SZPT-CHINA--proofofconcept-font.png" style="margin-top: -50px;margin-left: 436px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 642px;">
                </div>
                <div id="m3" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1280px;">
                </div>

            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 10500px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.5rem;font-family: 'Quicksand', sans-serif;">
                        Proof of Concept</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff; width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Overview
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Prototype
                            </p>
                        </div>
                        <div id="dir3" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir3p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Safety
                            </p>
                        </div>
                        <div id="dir4" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir4p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Protocol</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">● Overview

                </div>

                <div class="pb">
                    Our goal is to develop an engineered live biotherapeutic to fight with <i>Pseudomonas aeruginosa</i> infection and protect the burn wound simultaneously.
                    <br>
                    <br> We designed three modules to implement the functions and test the function of each biological system separately. Antipseudomonal drug production module, safety and drug release control module work as intended. And c-di-GMP signaling
                    and BC film production module work partially as anticipated and needs to be improved. So in respect of engineering experiments, we' ve proven our concept. (Please click
                    <a href="https://2021.igem.org/Team:SZPT-CHINA/Results">Results</a> to see the results of the experiments.)
                    <br>
                    <br> We envisioned two different formats of our products for the engineered live biotherapeutic, bacterial emulsion and freeze-dried bacteria. We also made the corresponding prototypes for a proof of concept.

                </div>

                <image src="https://2021.igem.org/wiki/images/f/f4/T--SZPT-CHINA--proof-pic-1.png" class="pic" style="margin-left: 253px;"> </image>
                <div class="tz">Figure 1. Proposed product formats.</div>


                <div id="content2" class="yj">● Prototype

                </div>

                <div class="ej">1. Bacterial emulsion</div>

                <div class="sj">1.1 Preparation</div>




                <video src="https://2021.igem.org/wiki/images/c/ca/T--SZPT-CHINA--POC-video-1.mp4" controls style="margin-top: 50px;margin-left: 48px;width: 1000px;margin-top: 50px;"> </video>

                <div class="pb">For emulsion preparation details, click <span style="color: blue;" id="down1"><u>Protocol</u></span>.</div>

                <div class="sj">1.2 Validation for BC film production</div>

                <div class="ssj">1.2.1 BC film production on 35 mm petri dish</div>


                <table border="1" style="font-size: 150%;text-align: center;line-height: 28px;margin-top: 50px;margin-left: 400px;">
                    <tr>
                        <td>Composition</td>
                        <td>b1</td>
                        <td>b2</td>

                    </tr>
                    <tr>

                        <td>Bacterial suspension/g</td>
                        <td>16.0</td>
                        <td>16.0</td>

                    </tr>
                    <tr>

                        <td>Ethylhexyl palmitate /g</td>
                        <td>0.4</td>
                        <td>0.4</td>

                    </tr>
                    <tr>

                        <td>Tween 80/g</td>
                        <td>3.3</td>
                        <td>3.2</td>

                    </tr>
                    <tr>

                        <td>Sepigel 305/g</td>
                        <td>0.3</td>
                        <td>0.4</td>

                    </tr>

                    <tr>

                        <td>Total/g</td>
                        <td colspan="2">20.0</td>


                    </tr>
                </table>

                <div class="tz">Table 1. Formulation of emulsion.

                </div>

                <div class="pb">
                    The strain used is J23100-bphS-J23109-pA2133-pSEVA331-<i>G. hansenii</i> ATCC 53582
                    <br> Petri dishes spread with the samples were placed under near-infrared light and Dark conditions respectively for 0.5 h, 1 h, 2 h and 12 h. The video of film forming phenomenon is below.

                </div>

                <video src="https://2021.igem.org/wiki/images/d/d5/T--SZPT-CHINA--POC-video-2.mp4" controls style="margin-top: 50px;margin-left: 94px;width: 1000px;"> </video>

                <div class="pb">Our experimental results showed that the sample formed a visible film on the surface of the plate after 0.5h. As time went on, the film became thicker.
                    <br>
                    <br> However, the film formation phenomenon was similar in the case of dark condition. The results showed that c-di-GMP signaling and BC film production module worked but could not function as we expected. Therefore, we only focused
                    on BC film production on the porcine skin under NIR light in the following part.
                </div>



                <div class="ssj">1.2.2 BC film production on procine skin</div>



                <div class="pb">Apply the emulsion onto the porcine skin, and put it under NIR light for 1h and 2h to observe the film formation. The video of the porcine skin experiment is below.
                </div>


                <video src="https://2021.igem.org/wiki/images/0/07/T--SZPT-CHINA--POC-video-3.mp4" controls style="margin-top: 50px;margin-left: 92px;width: 1000px;"></video>


                <div class="pb">
                    Our engineering bacteria grew into a thin film with good mechanical strength in 1h under NIR light.
                </div>

                <div class="ej">2. Freeze-dried bacteria</div>




                <div class="sj">2.1 Preparation</div>

                <image src="https://2021.igem.org/wiki/images/e/e8/T--SZPT-CHINA--proof-pic-5.png" class="pic" style="margin-left: 359px;"></image>
                <div class="tz">Figure 2. Freeze-dried strain of wild <i>G. hansenii</i> ATCC 53582</div>


                <div class="pb">For freeze-dried bacteria preparation details, click <span style="color: blue;" id="down2"><u>Protocol</u></span></div>




                <div class="sj">2.2 Validation</div>



                <div>
                    <image src="https://2021.igem.org/wiki/images/2/2f/T--SZPT-CHINA--POC-figure-1.png" width="100%">
                    </image>

                </div>


                <div id="content3" class="yj">● Safety</div>

                <div class="pb">
                    We designed a safety module that can trigger cell lysis under environmental blue light to reduce the risk of environmental release of our engineered bacteria.
                    <br>
                    <br> As shown in Figure 3, the engineered <i>G. hansenii</i> would not grow under room light. This proves that this safety module is effective. In other words, even if these engineered bacteria are released into the environment, it
                    will lyse itself under natural light. But it can grow normally in the dark.

                </div>



                <image src="https://2021.igem.org/wiki/images/8/83/T--SZPT-CHINA--proof-pic-6.png" class="pic" style="margin-left: 115px;"></image>
                <div class="tz" id="down1Key">Figure 3. The growth status of pDawn-RBSNNN-X174 E- pSEVA331-
                    <i>G.hansenii</i> ATCC 53582 under room light and dark conditions.（1）Room light,（2）Dark.
                </div>

                <div id="content4" class="yj">● Protocol</div>
                <object data="https://2021.igem.org/wiki/images/1/1b/T--SZPT-CHINA--POC-PDF-1.pdf" type="application/pdf" width="1200px" height="1000px" style="margin-top:50px;"></object>

            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 10500px;width: 55px;background-color: #d44225;">
            </div>

        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic" style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>


<!-- END-igem特有 -->
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
            //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function() {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/10500/, "12500")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/10500/, "12500")
            $("#red").attr("style", value);
            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);


            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);


            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
            // 是移动设备 展示移动设备页
            //document.getElementById('main').style = 'display:none'
            //document.getElementsByClassName('mobile')[0].style = 'display:flex'
            // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function() {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>